<template>
    <el-tabs v-model="activeTab">
        <!-- 第一部分：属性管理 -->
        <el-tab-pane label="属性管理" name="formTab">
            <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()"
                style="margin-top: 10px;">
                <div class="form">
                    <div>
                        <el-form-item label="属性编号">
                            <el-input v-model="state.dataForm.groupCode" type="text" clearable
                                placeholder="请输入属性编号"></el-input>
                        </el-form-item>
                        <el-form-item label="属性组名称">
                            <el-input v-model="state.dataForm.groupName" type="text" clearable
                                placeholder="请输入属性组名称"></el-input>
                        </el-form-item>
                        <el-form-item label="属性名称">
                            <el-input v-model="state.dataForm.attrName" type="text" clearable
                                placeholder="请输入属性名称"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <!-- 查询 -->
                        <el-form-item>
                            <el-button @click="state.getDataList()"
                                style="background: rgba(22, 119, 255, 1);color: #fff;border-radius: 5px;">{{ $t("query")
                                }}</el-button>
                        </el-form-item>
                        <!-- 重置 -->
                        <el-form-item>
                            <el-button @click="resetForm"
                                style="background: rgba(239, 244, 255, 1);border: 1px solid rgba(16, 98, 202, 1);color: #1062CA;border-radius: 5px;">重置</el-button>
                        </el-form-item>
                        <!--新增-->
                        <el-form-item>
                            <el-button @click="addHandle()" v-if="state.hasPermission('base:attrgroup:asve')"
                                style="background: rgba(22, 119, 255, 1);color: #fff;width: 100px;border-radius: 5px;">新增属性组</el-button>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
                v-loading="state.dataListLoading" :data="state.dataList" border
                @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
                <el-table-column align="center" prop="groupCode" label="属性编号" width="200"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="groupName" label="属性组名称" width="200"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="attrName" label="包含属性" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="productSeriesNumber" label="关联产品系列数量" width="150"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="createUsername" label="创建人" width="120"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="createAt" label="创建时间" width="180"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="updateUsername" label="更新人" width="120"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="updateAt" label="更新时间" width="180"
                    show-overflow-tooltip></el-table-column>
                <el-table-column fixed="right" align="center" prop="readOnly" label="操作" width="200">
                    <template v-slot="scope">
                        <el-button link type="primary" v-if="state.hasPermission('base:attrgroup:update')" @click="updateHandle(scope.row.id)">编辑</el-button>
                        <el-button link type="danger" v-if="state.hasPermission('base:attrgroup:delete')" @click="state.deleteHandle(scope.row.id)">{{ $t("delete")
                            }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
                :total="state.total" layout="total, sizes, prev, pager, next, jumper"
                @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle">
            </el-pagination>
        </el-tab-pane>
        <!-- 第二部分：属性显示配置 -->
        <el-tab-pane label="属性显示配置" name="tableTab">
            <div style="display: flex; justify-content: end;margin-top: 10px;">
                <el-form-item>
                    <el-button @click="addattributeHandle()"
                        style="background: rgba(22, 119, 255, 1);color: #fff;width: 100px;border-radius: 5px;margin-right: 20px;">新增配置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="updateConfigHandle()" :disabled="updateConfigFlag"
                        style="background: rgba(22, 119, 255, 1);color: #fff;width: 100px;border-radius: 5px;margin-right: 20px;">{{ updateConfigStr }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addConfigureHandle()"
                        style="background: rgba(22, 119, 255, 1);color: #fff;width: 100px;border-radius: 5px;">价格区间配置</el-button>
                </el-form-item>
            </div>
            <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
                v-loading="state1.dataListLoading" :data="state1.dataList" border
                @selection-change="state1.dataListSelectionChangeHandle" style="width: 100%;margin-top: 10px;">
                <el-table-column align="center" prop="sort" label="排序" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="groupName" label="属性组名称" width="200"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="attrCount" label="属性数量" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="newAttrCount" label="属性说明" width="150"
                    show-overflow-tooltip>
                    <template v-slot="scope">
                        <template v-if="scope.row.newAttrCount > 0">
                          <span style="color: #409EFF;">增加{{ scope.row.newAttrCount }}个新的属性选项</span>
                        </template>
                        <template v-else>
                          <span style="color: #999;">————</span>
                        </template>
                      </template>
                </el-table-column>
                <el-table-column align="center" prop="createUsername" label="创建人" width="120"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="createAt" label="创建时间" width="180"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="updateUsername" label="更新人" width="120"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="updateAt" label="更新时间" width="180"
                    show-overflow-tooltip></el-table-column>
                <el-table-column fixed="right" align="center" prop="readOnly" label="操作" width="200">
                    <template v-slot="scope">
                        <el-button link type="primary" @click="updateHandle1(scope.row.id)">编辑</el-button>
                        <el-button link type="danger" @click="state1.deleteHandle(scope.row.id)">{{ $t("delete")
                            }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="state1.page" :page-sizes="[10, 20, 50, 100]" :page-size="state1.limit"
                :total="state1.total" layout="total, sizes, prev, pager, next, jumper"
                @size-change="state1.pageSizeChangeHandle" @current-change="state1.pageCurrentChangeHandle">
            </el-pagination>
             <!-- 弹窗, 价格区间配置 -->
            <addConfigure :key="addConfigurekey" ref="addOrUpdateRef" ></addConfigure>
        </el-tab-pane>
    </el-tabs>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import useView from "@/hooks/useView";
import { nextTick, onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import addConfigure from "./attribute-list-addConfigure.vue";
import baseService from "@/service/baseService";

const updateConfigStr = ref("更新配置");
const updateConfigFlag = ref(false);
// 定时器引用
let configCheckTimer: NodeJS.Timeout | null = null;
const view = reactive({
    getDataListURL: '/noc/attrgroup/list',
    getDataListIsPage: true,
    deleteURL: "/noc/attrgroup/delete",
    deleteIsBatch: true,
    dataForm: {
        id: "",
        groupCode: "",
        groupName: "",
        attrName: "",
    }
});

const view1 = reactive({
  getDataListURL: '/noc/attrgroupconfig/list',
  getDataListIsPage: true,
  deleteURL: "/noc/attrgroupconfig/delete",
  deleteIsBatch: true
});
import { useRoute } from 'vue-router'

const route=useRoute()
// 用于存储当前激活的 tab 名称
// const activeTab = $route.query.activeTab==""?ref( 'formTab'):ref($route.query.activeTab);
const activeTab = ref('formTab');

onMounted(() => {
  const targetTab = route.query.activeTab as string | string[] | undefined;
  if (targetTab) {
    activeTab.value = Array.isArray(targetTab) ? targetTab[0] : targetTab;
  }
  // 组件挂载时检查一次配置状态
  checkUpdateConfig();
});

// 组件卸载时清理定时器
onUnmounted(() => {
  clearConfigCheckTimer();
});

// 重置表单
const resetForm = () => {
    view.dataForm.id = "";
    view.dataForm.groupCode = "";
    view.dataForm.groupName = "";
    view.dataForm.attrName = "";
    state.getDataList();
};

/**
 * 打开新增或编辑属性组对话框
 */
const router = useRouter();
const addattributeHandle = () => {
    router.push({
        path: "/program/attribute-list-addattribute",
    });
};

const addHandle = (() => {
    router.push({
        path: "/program/attribute-list-add-or-update"
    });
});

const updateHandle = ((id: number) => {
    router.push({
        path: "/program/attribute-list-add-or-update",
        query: { id }
    });
});

const updateHandle1 = ((id: number) => {
  router.push({
    path: "/program/attribute-list-addattribute",
    query: { id }
  });
});

const updateConfigHandle = (() => {
    baseService.post("/noc/attrgroupconfig/updateConfig").then((res) => {
        if (res.code == 0) {
            updateConfigStr.value = "配置更新中..."
            updateConfigFlag.value = true;
            // 启动定时器，每10秒检查一次配置更新状态
            startConfigCheckTimer();
        }
    });
});
const checkUpdateConfig = (() => {
    baseService.get("/noc/attrgroupconfig/checkUpdateConfig").then((res) => {
        if (res.code == 500) {
            updateConfigStr.value = "配置更新中..."
            updateConfigFlag.value = true;
        } else {
            updateConfigStr.value = "更新配置"
            updateConfigFlag.value = false;
            // 配置更新完成，清除定时器
            clearConfigCheckTimer();
        }
    });
});

/**
 * 启动配置检查定时器
 */
const startConfigCheckTimer = () => {
    // 清除已存在的定时器
    clearConfigCheckTimer();
    // 设置新的定时器，每10秒执行一次
    configCheckTimer = setInterval(() => {
        checkUpdateConfig();
    }, 10000);
};

/**
 * 清除配置检查定时器
 */
const clearConfigCheckTimer = () => {
    if (configCheckTimer) {
        clearInterval(configCheckTimer);
        configCheckTimer = null;
    }
};

//价格区间配置
const addConfigurekey = ref(0);
const addOrUpdateRef = ref();
const addConfigureHandle = (id?: number) => {
    addConfigurekey.value++;
    nextTick(() => {
        addOrUpdateRef.value.init();
    });
};

const state = reactive({ ...useView(view), ...toRefs(view) });
state.limit = 20;
const state1 = reactive({ ...useView(view1), ...toRefs(view1) });
state.limit = 20;
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
    white-space: nowrap;
    font-size: 13px;
    height: 25px;
}

.el-input {
    width: 218px;
    height: 32px;
    opacity: 1;
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
}

.form {
    display: flex;
    justify-content: space-between;
}
</style>
